<template>
  <div>

    <admin-container>
      <template v-slot:content>

        <table-plugin
            :page="page"
            :config="tableSetting"
            :part-operate="partOperate"
            :search-operate="searchOperate"
            @part="partOperateActuator"
            @search="searchOperateActuator"
        ></table-plugin>

      </template>
    </admin-container>

    <el-drawer
        title="变更角色"
        :visible.sync="drawer"
        @close="$refs['roleUpdateRef'].resetFields()"
    >
      <div class="drawer-main" v-if="changeRole.roleList">
        <div>
          <el-form :model="changeRole" ref="roleUpdateRef" :rules="rules">
            <el-form-item label="用户编号">
              <el-input v-model="user.id" disabled/>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="user.username" disabled/>
            </el-form-item>
            <el-form-item label="当前角色">
              <el-input v-model="user.roleName" disabled/>
            </el-form-item>
            <el-form-item label="变更为" prop="activeRoleId">
              <el-select v-model="changeRole.activeRoleId" placeholder="请选择">
                <el-option
                    v-for="item in changeRole.roleList"
                    :key="item.id"
                    :label="item.roleName"
                    :value="item.id"
                    :disabled="user.roleId == item.id"

                >
                </el-option>
              </el-select>

            </el-form-item>
          </el-form>
        </div>
        <div class="drawer-btn">
          <el-button type="primary" size="medium" @click="updateRole">确认变更</el-button>
          <el-button size="medium" @click="drawer=false">关闭</el-button>
        </div>
      </div>
    </el-drawer>


  </div>
</template>

<script>

import AdminContainer from '@/components/plugs/admin-container/AdminContainer.vue';
import TablePlugin from '@/components/plugs/table-plugin/TablePlugin.vue';

import {post, get} from "@/utils/api";

export default {
  data() {

    return {
      rules: {
        activeRoleId: [{required: true, message: '请选择你要变更为的角色', trigger: 'blur'}]
      },
      drawer: false,
      user: {},
      changeRole: {},
      page: {
        current: 1,
        size: 10,
        total: 0,
        records: []

      },
      partOperate: [
        {type: 'updateRole', text: '变更角色', level: 'text'},
        {type: 'seal', text: '封禁用户', level: 'text', color: 'red', reversalText: '解封用户', judge: 'status'},
      ],
      searchOperate: {
        entity: {},
        condition: [
          {label: '用户名', prompt: '请输入用户名(模糊查询)', type: 'input', width: '300px', name: 'username'},

        ]
      },
      tableSetting: {
        columns: [
          {
            fixed: false,
            prop: 'id',
            label: '用户编号',
            width: '150',
          },
          {
            fixed: false,
            prop: 'username',
            label: '用户名',
            width: '150',
          },
          {
            fixed: false,
            prop: 'roleName',
            label: '角色',
            width: '100',
          },
          {
            fixed: false,
            prop: 'nickname',
            label: '昵称',
            width: '150',
          },
          {
            fixed: false,
            prop: 'genderName',
            label: '性别',
            width: '50',
          },
          {
            fixed: false,
            prop: 'email',
            label: '邮箱',
            width: '150',
          },
          {
            fixed: false,
            prop: 'regTime',
            label: '注册时间',
            width: '150',
          },
          {
            fixed: false,
            prop: 'statusName',
            label: '状态',
            width: '80',
          }
        ]
      }

    }
  },
  methods: {
    getUserPage() {

      const promise = get({
        url: '/base-user/back/user/page',
        params: {
          current: this.page.current,
          size: this.page.size,
          username: this.searchOperate.entity.username

        }
      });

      promise.then(res => {
        console.log('userList', res);
        if (res.code === 200) {
          this.page.current = res.data.current;
          this.page.size = res.data.size;
          this.page.total = res.data.total;
          this.page.records = res.data.records;

        }
      })

    },
    partOperateActuator(index, row, operate) {

      switch (operate.type) {
        case 'seal':
          this.sealUser(row);
          break;
        case 'updateRole':
          this.user = row;
          this.showDrawer();

      }


    },
    searchOperateActuator(page) {

      this.getUserPage();

    },
    sealUser(row) {
      console.log('row', row);
      const promise = post({
        url: '/base-user/back/user/seal',
        data: {id: row.id, status: row.status ? 0 : 1}
      });
      promise.then(res => {
        if (res.code === 200) {
          this.$message.success(res.message);
          this.getUserPage();
          return;
        }
        this.message.error(res.message);
      })
    },
    showDrawer() {

      this.drawer = true;

    },
    getRoles() {
      const promise = get({
        url: '/base-system/back/role/list'
      });

      promise.then(res => {
        if (res.code === 200) {

          this.changeRole.roleList = res.data;
          return;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    updateRole() {
      this.$refs['roleUpdateRef'].validate((valid) => {

        if (valid) {

          const promise = post({
            url: '/base-user/back/user/set/role',
            data: {id: this.user.id, roleId: this.changeRole.activeRoleId}
          });

          promise.then(res => {
            if (res.code === 200) {
              this.$message.success(res.message);
              this.getUserPage();
              this.drawer = false;
              return;
            }
            this.message.error(res.message);
          })

        }
      })
    }

  },
  components: {AdminContainer, TablePlugin},
  created() {
    this.getUserPage();
    this.getRoles();
  }

}
</script>

<style scoped>

.drawer-main {
  padding-left: 20px;
  padding-right: 20px;
  position: relative;

}

.drawer-btn {
  position: fixed;
  bottom: 0;
  padding-bottom: 10px;
}
</style>